<template>
  <div class="settings-container">
    <header class="settings-header">
      <div class="back-button" @click="goBack">
        <span class="back-arrow">←</span> <!-- 返回箭头 -->
      </div>
      <h1>设置</h1>
    </header>
    <div class="settings-list">
      <div class="setting-item" @click="navigateTo('notifications')">
        <p>通知设置</p>
      </div>
      <div class="setting-item" @click="navigateTo('payment')">
        <p>支付方式</p>
      </div>
      <div class="setting-item" @click="navigateTo('address')">
        <p>收货地址</p>
      </div>
      <div class="setting-item" @click="navigateTo('about')">
        <p>关于我们</p>
      </div>
      <div class="setting-item logout" @click="logout">
        <p>退出登录</p>
      </div>
    </div>
  </div>
</template>

<script>
	import Cookies from 'js-cookie';
	export default {
	  methods: {
		goBack() {
		  uni.navigateBack(); // 返回到上一个页面
		},
		navigateTo(page) {
			if (page === 'about') {
			uni.navigateTo({
			  url: '/pages/mine/developer/team-introduction'
			});
			} else {
			console.log(`导航到: ${page}`);
			// 这里可以添加其他页面导航的通用逻辑，比如记录点击等操作
			}
		},
		 logout() {
		  // 清除本地存储的登录相关信息，这里销毁存储在Cookie中的token
		  Cookies.remove('token');
		  // 跳转到登录页面
		  uni.navigateTo({
			url: '/pages/login/login'
		  });
		}
	  }
	};
</script>

<style>
.settings-container {
  width: 100%;
  max-width: 375px; /* iPhone 8 width */
  margin: 0 auto;
  padding: 20px;
  background-color: #f7f7f7;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  color: #333;
  font-family: Arial, sans-serif;
  box-sizing: border-box;
}

.settings-header {
  text-align: center;
  margin-bottom: 20px;
  position: relative; /* 以便绝对定位返回按钮 */
}

.back-button {
  position: absolute; /* 绝对定位将返回按钮放置在左上角 */
  left: 10px; /* 向左移动以靠近左上角 */
  top: 10px; /* 向上移动 */
  cursor: pointer; /* 鼠标光标化为指针 */
  font-size: 28px; /* 增加字体大小以使箭头更粗 */
}

.back-arrow {
  color: #333; /* 自定义箭头颜色 */
}

.settings-list {
  background-color: #ffffff;
  border-radius: 4px;
  padding: 15px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.setting-item {
  padding: 15px;
  border-bottom: 1px solid #eee;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.setting-item:hover {
  background-color: #f0f0f0;
}

.setting-item:last-child {
  border-bottom: none;
}

.logout {
  color: #dc3545; /* 红色用于退出登录 */
  font-weight: bold;
}
</style>